<template>
  <div id="app">
       <mt-tab-container class="page-tabbar-container" v-model="selected">
         <!-- 首页信息 -->
        <mt-tab-container-item id="index">
            <!-- header -->
            <mt-header fixed title="首页"></mt-header>
            <!--图片 -->
            <div id="image">
                <img src="./assets/image/logo.jpg" alt="">
            </div>
            <!-- 数据  title   修改密码  消息通知-->
            <div class="data">
                <h4 class="dataTitle">数据明细</h4>
                <div class="txt">
                    <span class="message">
                      <img src="./assets/image/message.png" alt="">
                    </span>
                    <span class="password">
                      <img src="./assets/image/password.png" alt="">
                    </span>
                </div>
            </div>
            <!-- 当前雷达运行情况 -->
            <div class="radar_info">
                <p>当前雷达运行情况</p>
                <div class="radar_table">
                    <el-table :data="tableData">
                        <el-table-column label="站点名称" prop="name"></el-table-column>
                        <el-table-column label="设备状态" prop="state"></el-table-column>
                        <el-table-column label="工作报告" prop="report"></el-table-column>
                    </el-table>
                </div>
            </div>
        </mt-tab-container-item>
        <!-- 工作流程 -->
        <mt-tab-container-item id="work">
          <mt-header fixed title="工作流程"></mt-header>
          <mt-cell v-for="n in 25" :title="'工作流程 ' + n"  :key="n"/>
        </mt-tab-container-item>
        <!-- 知识档案 -->
        <mt-tab-container-item id="knowledge">
          <mt-header fixed title="知识档案"></mt-header>
          <mt-cell v-for="n in 7" :title="'知识档案 ' + n" :key="n" />
        </mt-tab-container-item>
        <!-- 设备管理 -->
        <mt-tab-container-item id="device">
          <mt-header fixed title="设备管理"></mt-header>
          <mt-cell v-for="n in 12" :title="'设备管理 ' + n" :key="n"/>
        </mt-tab-container-item>
      </mt-tab-container>

      <mt-tabbar v-model="selected" fixed>
        <mt-tab-item id="index">
            <img slot="icon" src="./assets/image/index.png">
            首页
        </mt-tab-item>
        <mt-tab-item id="work">
            <img slot="icon" src="./assets/image/work.png">
            工作流程
        </mt-tab-item>
        <mt-tab-item id="knowledge">
            <img slot="icon" src="./assets/image/knowledge.png">
            知识档案
        </mt-tab-item>
        <mt-tab-item id="device">
            <img slot="icon"  src="./assets/image/device.png">
            设备管理
        </mt-tab-item>
    </mt-tabbar>
  </div>
</template>

<script>
import index from './components/index.vue'

export default {
  name: 'app',
  components: {
    index
  },
  data(){
    return{
      selected:"首页",
      tableData:[
        {
          name:"茂名海事局",
          state:"正常",
          report:"暂无"
        },
        {
          name:"惠州海事局",
          state:"正常",
          report:"暂无"
        },
        {
          name:"珠海海事局",
          state:"正常",
          report:"暂无"
        },
        {
          name:"东莞海事局",
          state:"正常",
          report:"暂无"
        }
      ]
    }
  }
}
</script>

<style scoped lang="scss">
#app {
  font-family: 'Avenir', Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  color: #2c3e50;

  #image{
    width:100vw;
    overflow: hidden;
    img{
      display: block;
      width:100vw;
    }
  }
  .data{
    width:100vw;
    height:10vw;
    line-height:10vw;
    background:rgb(221, 217, 218);
    .dataTitle{
      width:47vw;
      float:left;
      padding-left:3vw;
      
    }
    .txt{
      width:50vw;
      float:left;
      .message{
        float:right;
        padding-right:5vw;
      }
      .password{
        float:right;
        padding-right:5vw;
      }
    }
  }
}

</style>
